<template>
	<div class="wrap">
		<div class="cont" >
			<div class="top" v-if="circlehide.bol[0]">
				<span></span>
				{{circlecont.title}}
				<span></span>
			</div>
			<div class="bigimg">
				<img :src="circlecont.big"/>
			</div>
			<div class="smallimg">
				<div class="smallimgcont" v-for="i in circlecont.small">				
					<div class="imgcot" @click="jump(i.id)">
						<img :src="i.smallurl" />
						
					</div>
					<p class="title">{{i.name}}</p>
					<p class="price">¥{{i.price}}</p>
					<p class="surplus" v-if="circlehide.bol[1]">还剩100件</p>
					<div class="torob" @click="jump(i.id)"  v-if="circlehide.bol[2]">马上去抢</div>
				</div>

			</div>
		</div>

	</div>
</template>

<script>
	export default {
		name: "Dcircle",
		props: ["circlecont","circlehide"],
		methods:{
			jump:function(id){
				this.$router.push({path:"/Goodsdetails/"+id})
			}
		},
	}
</script>

<style scoped>
	
	.wrap {
		width: 100%;
		background: #f2f2f2;
		padding-bottom: 0.1rem;
	}
	
	.cont {
		
		width: 100%;
		background: white;
		
	}
	
	.bigimg img {
		width: 100%;
		height: 100%;
	}
	
	.smallimg {
		width: 90%;
		margin: 0 auto;
		display: flex;
		justify-content: space-around;
	}
	
	.smallimgcont {
		width: 33%;
		text-align: center;
		margin-top: 0.5rem;
		padding-bottom:0.3rem
		
	}
	.imgcot{
		width: 100%;
		text-align: center;
	}
	.imgcot img {
		height: 7rem;
		
	}
	.smallimgcont:nth-child(2) .imgcot{
		border-right: 0.1rem solid #ccc;
		border-left: 0.1rem solid #ccc;
		
	}
	.title {
		font-size: 1.1rem;
		font-weight: 700;
		padding-top: 0.5rem ;
	}
	
	.price {
		font-size: 1.1rem;
		color: red;
		font-weight: 300;
	}
	
	.surplus {
		width: 80%;
		margin: 0 auto;
		font-size: 1rem;
		padding-top: 0.5rem;
		border-top: 0.1rem solid #ccc;
	}
	
	.torob {
		width: 70%;
		line-height: 1.7rem;
		background: red;
		font-weight: 300;
		margin: 0.5rem auto;
		border-radius: 0.5rem;
		color: white;
		font-size: 1rem;
	}
	.top{
		width: 94%;
		margin: 0 auto;
		text-align: center;
		font-size: 1.4rem;
		padding: 0.5rem 0;
		color: #4d4d4d;
		font-weight: 200;
	}
	.top span{
		display: inline-block;
		width: 3rem;	
		border: 0.05rem solid #ccc;
		vertical-align: middle;
	}
</style>